<template lang="pug">
	.search-history-wrap
		.title
			p 搜索历史
			p(@click="clearHistory") 清空搜索历史
		.history-wrap
			.no-history-text(v-if="history.length<=0") 暂无搜索历史
			.history-item(v-for="(item,index) in history" :key="item.name")
				p {{item.name}}
				img(src="../../assets/image/bespeak/delete.png" @click="deleteHistory(item)")
</template>

<script>
export default {
	name: 'search-history',
	data() {
		return {
			history: []
		}
	},
	created() {},
	mounted() {
		this.history = this.wx.getStorageSync('searchHistory').history || []
	},
	methods: {
		deleteHistory(item) {
			let history = _.pull(this.history, item)
			this.history = []
			setTimeout(() => {
				this.history = history
			}, 0)
			this.wx.setStorage({
				key: 'searchHistory',
				data: {
					history: history
				}
			})
		},
		clearHistory() {
			let that = this
			this.wx.removeStorage({
				key: 'searchHistory',
				success(res) {
					that.history = []
				}
			})
		}
	}
}
</script>

<style lang="stylus">
	.search-history-wrap
		.title
			display flex
			justify-content space-between
			align-items center
			line-height 44px
			color #aaa
			font-size 30px
			font-weight bold
			p
				padding mainPadding
		.history-wrap
			.history-item
				display flex
				justify-content space-between
				align-items center
				height 60px
				color blackFontColor1A
				font-size 28px
				p
					padding 0 mainPadding
				img
					width 40px
					height 40px
					padding 0 mainPadding
		.no-history-text
			color #aaa
			font-size 28px
			text-align center
			padding-top 60px
</style>
